<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/quick_layout.css">
    <script src="/js/jquery.js"></script>
</head>
<body>
<div class="mt20 mb20 tc">
    <button type="button" name="button" class="btn btn-default" onclick="login()">登录</button>
</div>
<div class="mt20 mb20 tc">
    <button type="button" name="button" class="btn btn-primary" onclick="getUserInfo()">获取用户信息</button>
</div>
<div class="mt20 mb20 tc">
    <button type="button" name="button" class="btn btn-primary" onclick="logout()">退出</button>
</div>
<script type="text/javascript">
    function login() {
        $.ajax({
            url: 'http://localhost:2000/api/login',
            type: 'POST',
            dataType: 'json',
            data: {
                username: 'jim',
                password: 'jim'
            },
            success: function (res) {
                if(res.code == 200) {
                    alert('Login success');
                }
            }
        });
    }

    function getUserInfo() {

        $.ajax({
            url: 'http://localhost:2000/api/getUserInfo',
            type: 'GET',
            dataType: 'json',
            success: function (res) {
                if(res.code == 401) {
                    alert('请先登录')
                } else {
                    alert(res.data.username);
                }
            }
        });
    }

    function logout() {
        $.ajax({
            url: 'http://localhost:2000/api/logout',
            type: 'GET',
            dataType: 'json',
            success: function (res) {
                location.reload();
            }
        });
    }
</script>
</body>
</html>
